<!DOCTYPE HTML>
<!--
  Beamed & Editor (create presentations with a clear structure)
  Copyright (C) 2012  Michael Fürst

  This program is free software; you can redistribute it and/or modify it
  under the terms of the GNU General Public License as published by the
  Free Software Foundation; either version 3 of the License, or (at your
  option) any later version.

  This program is distributed in the hope that it will be useful, but
  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
  for more details.

  You should have received a copy of the GNU General Public License along
  with this program; if not, see <http://www.gnu.org/licenses/>.
-->
<html>
 <head>
  <title>Beamed | Editor</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  <style>
	body {
		font-family:"Helvetica";
	}
	#code {
		font-family:"Lucida Console";
		font-size:0.9em;
	}
	div#canv {
		position: absolute;
		right:0;
		top:0;
	}
	div#toolbox {
		position: absolute;
		right:0;
		top:30%;
		width: 30%;
		height: 70%;
	}
	#code {
		position: absolute;
		left:0;
		top:0;
		width: 69%;
		height: 99%;
	}
	.active {
		background-color: green;
		padding:10px;
		color: white;
	}
	.active:hover {
		background-color: darkgreen;
		padding:10px;
		color: white;
	}
	.passive {
		background-color: darkorange;
		padding:10px;
		color: white;
	}
	.passive:hover {
		background-color: orange;
		padding:10px;
		color: white;
	}
	.inactive {
		background-color: red;
		padding:10px;
		color: white;
	}
	.inactive:hover {
		background-color: darkred;
		padding:10px;
		color: white;
	}
	a {		
		text-decoration: none;
	}
  </style>	
  <script type="text/javascript" src="gui.js"></script>
  <script type="text/javascript" src="menue.js"></script>
  <script type="text/javascript" src="jslinker.js"></script>
  <script type="text/javascript" src="presentation.js"></script>
  <script type="text/javascript" src="helper.js"></script>
  <script type="text/javascript" src="stylelib.js"></script>
  <script type="text/javascript">
	var cw = window.innerWidth*0.3;
	var ch = window.innerHeight*0.3;
	var mousewheel_state = true;
	function update() {
		cw = window.innerWidth*0.3;
		ch = window.innerHeight*0.3;
		Presentation.setResolution(cw, ch);
	}
	function toggleParser() {
		enableGUI_parser = !enableGUI_parser;
		if (enableGUI_parser == true) {
			document.getElementById("GUI_parse").className = 'active';
		} else {
			document.getElementById("GUI_parse").className = 'inactive';
		}
	}
	function toggleMousewheel() {
		mousewheel_state = !mousewheel_state;
		Presentation.setMouswheel(mousewheel_state);
		if (mousewheel_state == true) {
			document.getElementById("mousewheel").className = 'active';
		} else {
			document.getElementById("mousewheel").className = 'inactive';
		}
	}
	function confirmReaction() {
		JSLinker.fromFile();
		document.getElementById("confirm").className = 'inactive';
		window.setTimeout(confirmRefresh, 1000);
	}
	function confirmRefresh() {
		document.getElementById("confirm").className = 'passive';
	}
  </script>
 </head>
 <body onload="Presentation.start(false, cw, ch, 'canv');" onresize="update();">
	<!-- The toolbox is placed below of the canvas element, has the same width as the canvas element and has the full remaining height (window.height-canvas.height) -->
	<!-- DESCRIPTION: This element contains all buttons and options you can configure at your presentation in general (also open "Fullscreen GUI" and so on -->
	<div id="toolbox" align="center">
		<h3>Settings:</h3>
		<a href="javascript:confirmReaction();"><div id="confirm" class="passive">F4 Update</div></a><BR>
		<a href="javascript:toggle_fullscreen();"><div class="active">F2 Change view</div></a><BR>
		<a href="javascript:toggleParser();"><div id="GUI_parse" class="active">GUIParser</div></a><BR>
		<a href="javascript:toggleMousewheel();"><div id="mousewheel" class="active">Mousewheel-Zoom</div></a><BR>
		<BR>
		For publishing and saving copy the content of the textarea into "data.js"!<BR>
		You can launch your presentation without the demo by using "presentation.html"!<BR>
	</div>	


	<!-- The editor is placed left of the canvas element and takes full pagesize -->
	<!-- DESCRIPTION: Here you can edit your presentation by changing the codebase, this element will be updated to be refering to the gui when fullscreenmode is quit -->
	<textarea id="code" resizable="false"></textarea>


        <!-- This is the canvas element, which should be at the top right corner, and take a certain size -->
	<!-- DESCRIPTION: This displays an uneditable preview of the presentation (as long as it is not in fullscreenmode -->
	<div id="canv"></div>
 </body>
</html>
